<template>
<div class="contain" id="scrollList">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">订单列表</h2>
  </header>
  <div class="displayflex top-bar-w">
    <div class="top-bar-c flex1">
      <i class="iconfont icon-sech"></i> 
      <div class="ipt"><input type="text" placeholder="输入订单编号" v-model="bbillno"></div>
    </div> 
    <div class="btn-sech" @click="resetGet()">搜索</div>
  </div>
    <!--
    <tab :line-width='2' class="lltab">
      <tab-item @on-item-click="goLink">全部</tab-item>
      <tab-item @on-item-click="goLink('51')">待提货</tab-item>
      <tab-item @on-item-click="goLink('52')">待交货</tab-item>
      <tab-item selected @on-item-click="goLink('81')">已签收</tab-item>
    </tab>
    -->
  <scroller lock-x height="-52" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="100" v-show="todolist.length>0">
  <div>
    <div class="list-warp" v-for="item in todolist">
      <div class="list-ctx" @click="goDetail(item.BBillGuid)">
        <div class="head cf ft14">
          <p class="f-l">{{item.BBillNo}}</p>
          <span class="f-r">{{item.State | orderStateDrv}}</span>
        </div>
        <div class="grab-wrap">
          <div class="addr ft17"><span class="dotted"></span>{{item.DepartureProvince | province}}{{item.DepartureCity | city}}{{item.DepartureDistrict | district}}{{item.DepartureAddress}}</div>
          <div class="addr ft17"><span class="dotted org"></span>{{item.ArrivalProvince | province}}{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district}}{{item.ArrivalAddress}}</div>
          <div class="statis ft14 displayflex">
            <span>{{item.OrdersVolumn}}m³，{{item.OrdersWeight}}kg，共{{item.OrdersPKGS}}件</span>
            <div class="flex1 txt-rit">运费<em class="org">￥</em><span class="price org ft16">{{item.CarrierAmount | DriverFee}}</span></div>
          </div>

          <template v-if="gostate==56">
            <div class="ft14" v-if="item.LastArrivalArrivedDate">要求到达时间：<span class="org">{{item.LastArrivalArrivedDate | ydmhm}}</span></div>
            <div class="ft14">距离截至时间仅剩：<span class="red">{{item.LastArrivalArrivedDate | DateTransformation}}</span></div>
          </template>

          <template v-if="gostate==81">
            <div class="ft14" v-if="item.ConsignTime">实际取货时间：<span class="org">{{item.ConsignTime | ydmhm}}</span></div>
            <div class="ft14" v-if="item.ArrivalDate">实际到达时间：<span class="org">{{item.ArrivalDate | ydmhm}}</span></div>
            <div class="ft14" v-if="item.ReceiveTime">实际签收时间：<span class="org">{{item.ReceiveTime | ydmhm}}</span></div>
          </template>
        </div>
        <div class="icon-tag" v-if="item.BBillType == 'B05'"><img src="~images/icon/emergent.png"></div>
      </div>
      <div class="list-btn">
        <div class="btn btn-sm" @click="goDetail(item.BBillGuid)">订单详情</div>
        <div class="btn btn-sm" v-if="item.State == '56'" @click="showQRcode(item.BBillGuid)">签收二维码</div>
        
      </div>
    </div>
  </div>
  <p class="txt-bottom" v-if="totalLength == todolist.length"><em class="txt">我是有底线的</em></p>
  </scroller>
  <div class="noDate_page" v-if="todolist.length<=0">
    <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
    未找到相关数据
  </div>
  <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', 'background-color': '#fff'}">
    <div class="qr-code">
      <p class="tit ft17">扫码签收<i class="iconfont icon-close" @click="next"></i></p>
      <div class="ctx">
        <qrcode :value="valueurl" :size="200"></qrcode>
      </div>
      <p class="tip ft17">扫二维码快速完成订单签收</p>
    </div>
  </x-dialog>
</div>
</template>

<script>
export default {
  data() {
    return {
      todolist: [],
      showLoad: false,
      state: "",
      bbillno: "",
      showDialogStyle: false,
      valueurl: "",
      count:0,
      pageindex:1,
      totalLength:0,
    };
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    },
    gostate() {
      return this.$route.query.gostate;
    },
    gostate() {
      if (this.$route.query.gostate) {
        return this.$route.query.gostate;
      }
    }
  },
  // activated() {
  //   Object.assign(this.$data, this.$options.data());
  //   this.getData();
  //   var title = "";
  //   //处理抬头文字
  //   switch (this.gostate) {
  //     case "56":
  //       title = "待签收";
  //       break;
  //     case "81":
  //       title = "已签收";
  //       break;
  //   }
  //   document.title = title;
  // },
  created() {
    this.getData();
    var title = "";
    //处理抬头文字
    switch (this.gostate) {
      case "56":
        title = "待签收";
        break;
      case "81":
        title = "已签收";
        break;
    }
    document.title = title;
  },
  watch:{
    bbillno(val){
      if(!val){
        this.resetGet();
      }
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // goLink(state){
    //   this.state = state == 0?null:state;
    //   this.getData();
    // },
    goDetail(id) {
      this.$router.push({
        path: "/orderDetail",
        query: { id: id }
      });
    },
    resetGet(){
      this.todolist = [];
      this.count=0;
      this.pageindex=1;
      this.getData();
    },
    onScrollBottom () {
      this.count++;
      if(this.count==1){
        this.getData();
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset();
        });
      };
    },
    getData() {
      this.showLoad = true;
      var _this = this;
      var query = {
        BBillNo: _this.bbillno,
        State: this.gostate,
        DriverGuid: this.userinfo.StaffID,
        PageIndex:this.pageindex,
        PageSize:8
      };
      console.log(query);
      this.Ajax.post("SearchTakableOrderList", query).then(function(resp) {
        _this.showLoad = false;
        if (resp.IsSuccess) {
          var result = resp.Datas;
          if(result.length > 0){
            _this.todolist=_this.todolist.concat(result);
            _this.pageindex++;
            _this.count = 0;
          };
          _this.totalLength = resp.TotalRecords;
        } else {
          _this.$vux.toast({
            type: "warn", //success, warn, cancel, text
            text: resp.ErrorMessage
          });
        }
      });
    },
    showQRcode(id) {
      var _this = this;
      var qr = {
        r: id
      };
      this.valueurl = JSON.stringify(qr);
      this.showDialogStyle = true;
    },
    next() {
      this.showDialogStyle = false;
    }
  }
};
</script>